<template>
 <div class="user-card">
    <el-avatar :size="28" :src="userAvatar" fit="cover"  />
    <div class="user-name">{{ username }}</div>
 </div>
</template>
<script setup>
import {ref} from 'vue'
defineProps(['userAvatar','username'])
</script>
<style scoped>
.user-card{
    display: flex;
    align-items: center;
}
.el-avatar{
    margin-right: 10px;
}
.user-name{
    color: #909399;
}
</style>